<template>
    <div class="box">
        <el-row :gutter="10">
            <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="100px">
                <el-col :span="19" :offset="0">
                    <el-form-item label="所属项目" prop="projectId">
                        <el-select v-model="queryParams.projectId" :style="'width:215px'" placeholder="请选择所属项目">
                            <el-option v-for="item in projectList" :key="item.projectId" :label="item.shortName"
                                :value="item.projectId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="设备类型" prop="deviceType">
                        <el-select v-model="queryParams.deviceType" :style="'width:215px'" placeholder="请选择设备类型">
                            <el-option v-for="item in this.dict.type.sys_device_mode" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间" prop="time">
                        <span @click.once="changeInitCalendarPage" class="date-box">
                            <el-date-picker v-model="queryParams.time" :clearable="false" type="daterange" range-separator="-"
                                start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
                                value-format="timestamp">
                            </el-date-picker>
                        </span>
                    </el-form-item>

                    <!-- <el-form-item label="是否启用" prop="isEnable">
                <el-select v-model="queryParams.isEnable" placeholder="请选择是否启用" clearable
                  size="small">
                  <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value"
                    :label="dict.label" :value="dict.value" />
                </el-select>
              </el-form-item> -->
                </el-col>

                <el-col :span="5" :offset="0">
                    <el-form-item>
                        <el-button  icon="el-icon-search" size="mini" @click="handleQuery">搜索
                        </el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-col>
            </el-form>
        </el-row>
        <div class="card-container">
            <div id="bar-chart"></div>
        </div>


    </div>
</template>
  
<script>
import * as echarts from 'echarts';
import moment from 'moment';
import { getProject } from "@/api/runningLog/runningLog.js";
import { getDeviceOnlineStatistics, getDeviceTimeDelayStatisticsget } from "@/api/onlineStatistics/index.js";
export default {
    name: "Version",
    dicts: [
        "sys_device_mode",
    ],
    data() {
        return {
            projectList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                projectId: null,
                deviceType: null,
                startTime: null,
                endTime: null,
                time: []
            },
            pickerOptions: {
                //禁用当前日期之前的日期
                disabledDate(time) {
                    //Date.now()是javascript中的内置函数，它返回自1970年1月1日00:00:00 UTC以来经过的毫秒数。
                    return time.getTime() > Date.now();
                },
            },
        };
    },
    created() {
        const format = 'x';
        let obj = {
            value: null,
            label: '全部'
        }
        let _data = []
        _data = this.dict.type.sys_device_mode
        this.dict.type.sys_device_mode.unshift(obj)
        console.log(_data[0].label,_data,'this.dict.type.sys_device_mode')
        let beg = moment().startOf('month').format(format)
        let end = moment().format(format)
        this.queryParams.startTime = beg
        this.queryParams.endTime = end
        //将值设置给插件绑定的数据
        this.queryParams.time.push(end);
        this.queryParams.time.unshift(beg);
        console.log(this.queryParams.time)
        this.getList();
        this.getConfig()
        // this.getMode();
    },
    activated() {
        // this.getList();
    },
    methods: {
        changeInitCalendarPage() {
            let element = document.querySelectorAll(
                ".el-picker-panel__icon-btn.el-icon-arrow-left"
            )
            if (element) element[element.length - 1].click();
        },
        async getConfig() {
            const res = await getProject();
            if (res.code == 200) {
                let obj = {
                    projectId: null,
                    shortName: '全部'
                }
                this.projectList = res.data;
                this.projectList.unshift(obj)
            }
        },
        init(data) {
            let dom = echarts.init(document.getElementById('bar-chart'))
            var LegData = ['在线数', '设备总数'];
            var maxSerData = [];
            var minSerData = []
            var XaData = [];
            var XaAllData = []
            data.forEach(item => {
                maxSerData.push(item.maxOnline)
                minSerData.push(item.minOnline)
                XaData.push(item.time)
                XaAllData.push(item.total)
            })
            //数据参数

            var option = {
                title: {
                    show: false,
                },
                title: [
                    {
                        top: "3%",
                        text: "最高在线数",
                        textStyle: {
                        color: '#fff',}
                    },
                    {
                        top: "50%",
                        text: "最低在线数",
                        textStyle: {
                        color: '#fff',}
                    },
                ],

                // tooltip: {
                //     trigger: "axis",
                // },
                grid: [
                    {
                        top: "8%",
                        bottom: "55%",
                    },
                    {
                        top: "55%",
                        bottom: "3%",
                    },
                ],
                // tooltip: {
                //     trigger: 'axis',
                //     axisPointer: {
                //         type: 'shadow'
                //     },
                // },
                legend: {
                    data: LegData,
                    right: '15%',
                    top: '0',
                    textStyle: {
                        color: '#fff'
                    }
                },
                xAxis: [{
                    type: 'category',
                    data: XaData,
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        // rotate: 45,
                        textStyle: {
                            color: '#fff',
                            fontSize: 12,
                        },
                    },
                    axisLine: {
                        show: false,
                    }
                }, {
                    gridIndex: 1,
                    type: 'category',
                    data: XaData,
                    splitLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        interval: 0,
                        // rotate: 45,
                        textStyle: {
                            color: '#fff',
                            fontSize: 12,
                        },
                    },
                    axisLine: {
                        show: false,
                    }
                }],
                yAxis: [{
                    type: 'value',
                    splitLine: {
                        //show: false,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(200,200,200,1)' //里面横着的虚线
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    // data: SerData,
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontSize: 12
                        }
                    },
                    axisLine: {
                        show: false,
                    }
                }, {
                    gridIndex: 1,
                    type: 'value',
                    splitLine: {
                        //show: false,
                        lineStyle: {
                            type: 'dashed',
                            color: 'rgba(200,200,200,1)' //里面横着的虚线
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    // data: SerData,
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontSize: 12
                        }
                    },
                    axisLine: {
                        show: false,

                    }
                }],
                series: [{
                    name: LegData[0],
                    type: 'bar',
                    data: maxSerData,
                    barWidth: '20px',
                    itemStyle: {
                        normal: {
                            barBorderRadius: [50, 50, 0, 0],
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: '#0085E8' // 0% 处的颜色
                            }], false)
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            formatter: '{c}',
                            position: 'insideTop',
                            textStyle: {
                                color: '#fff',
                                fontSize: 12,
                            }

                        }
                    }
                }, {
                    name: LegData[1],
                    type: 'bar',
                    barGap: '-100%',
                    barWidth: '20px',
                    itemStyle: {
                        color: 'rgba(0,0,0,0)',
                        borderColor: '#2A71FD',
                        padding: 0,
                        normal: {
                            barBorderRadius: [50, 50, 0, 0],
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: 'rgba(220,239,255,1)' // 0% 处的颜色
                            }], false)
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            lineHeight: 12,
                            formatter: '{c}',
                            position: 'top',
                            right: 0,
                            textStyle: {
                                // fontWeight:'bold',
                                color: '#fff',
                                fontSize: 12
                            }

                        }
                    },
                    z: -10,
                    data: XaAllData
                }, {
                    name: 'Temperature',
                    type: 'line',
                    data: maxSerData,
                    smooth:true,
                    symbol: 'none',
                }, {
                    name: LegData[0],
                    type: 'bar',
                    data: minSerData,
                    barWidth: '20px',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    itemStyle: {
                        normal: {
                            barBorderRadius: [50, 50, 0, 0],
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: '#0085E8' // 0% 处的颜色
                            }], false)
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            formatter: '{c}',
                            position: 'insideTop',
                            textStyle: {
                                color: '#fff',
                                fontSize: 12,
                            }

                        }
                    }
                }, {
                    name: LegData[1],
                    type: 'bar',
                    barGap: '-100%',
                    barWidth: '20px',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    itemStyle: {
                        color: 'rgba(0,0,0,0)',
                        borderColor: '#2A71FD',
                        padding: 0,
                        normal: {
                            barBorderRadius: [50, 50, 0, 0],
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: 'rgba(220,239,255,1)' // 0% 处的颜色
                            }], false)
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            lineHeight: 12,
                            formatter: '{c}',
                            position: 'top',
                            right: 0,
                            textStyle: {
                                // fontWeight:'bold',
                                color: '#fff',
                                fontSize: 12
                            }

                        }
                    },
                    z: -10,
                    data: XaAllData
                }, {
                    name: 'Temperature',
                    type: 'line',
                    xAxisIndex: 1,
                    yAxisIndex: 1,
                    data: minSerData,
                    smooth:true,
                    symbol: 'none',
                },],
                barCategoryGap: '40%'
            };
            dom.setOption(option)
        },

        /** 查询设备版本列表 */
        getList() {
            getDeviceOnlineStatistics(this.queryParams).then((response) => {
                if (response.code == 200) {
                    console.log(response)
                    this.init(response.data)
                }
            });
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                modelIds: [],
                version: null,
                versionDesc: null,
                softwareSourceNames: [],
                softwareHdfsNames: [],
                isEnable: "0",
            };
            this.upload = {
                url: "",
                fileList: [],
                file: null,
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.queryParams.startTime = this.queryParams.time[0]
            this.queryParams.endTime = this.queryParams.time[1]
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.$forceUpdate();
            this.handleQuery();
        },


    },
};
</script>
  
<style lang="scss" scoped>
.box {
    width: 100%;
    height: 100%;
    padding: 20px;
}


.body-title {
    display: flex;
    position: relative;
    // justify-content: space-between;
    align-items: center;
}

.body-title-left {
    display: flex;
    height: 100%;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 600;
    color: #fff;
    line-height: 64px;
}

.body-title-right {
    position: absolute;
    right: 0;
}

#bar-chart {
    width: 100%;
    height: 650px;
}
</style>
  